<template>
  <div class="box_cont">
    <div>
      <table></table>
      <div class="cont_bg">
        <div class="cont_title"> — 今天已有 <span>{{amount}}</span> 人领取了现金 — </div>
        <div class="cont_lists">
          <div class="user_item" v-for="(item,index) in list" :key="index">
            <img :src="item.head?item.head:'/static/img/moren.png'" class="touxiang">
            <div class="info">
              <p><span>{{item.name}}</span><span>赚取了{{rmbNum}}元</span></p>
              <p><span>{{item.hour}}小时前</span><span>{{atoshiNum}} ATOS</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="zhezhao">
      <div class="hongbao_box">
        <img :src="userHead" class="fhb_touxiang">
        <p class="tishiyu">{{userName}} <br> 给你发了一个新人红包</p>
        <img src="/static/img/kai.png" class="kai" @click="toshowjine" v-show="!isshowjine">
        <p class="lq_jine" v-show="isshowjine">￥{{rmbValue}}</p>
        <!--跳转到红包验证页面-->
        <div class="lq_btn" v-show="isshowjine" @click="tohongbaoyanzheng">立即领取</div>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from "vue";
  import MintUI from "mint-ui";
  import { Toast , MessageBox } from "mint-ui";
  Vue.use( MintUI , Toast , MessageBox );

  // cxr 引入路由
  import Router from "vue-router";
  Vue.use(Router);

  export default {
    name: "linghongbao",
    data() {
      return {
        list: [],
        amount:null,
        rmbNum:null,
        atoshiNum:null,
        isshowjine:false,
        userHead:"/static/img/sft.png",
        userName:"",
        rmbValue:null,
        inviteCode:""
      };
    },
    methods: {
      toshowjine () {
        this.isshowjine=true
      },
      getData() {
        let _this=this
        _this.axios.post("/api/fakeUser/listFakeUser" ,{number:10}).then(res => {
          if (res.data.code == 100) {
            _this.amount=res.data.data.amount;
            _this.rmbNum=res.data.data.rmbNum;
            _this.atoshiNum=res.data.data.atoshiNum;
            _this.list=res.data.data.users;

          }  else {
            _this.tos(res.data.msg)
          }
        });
      },
      getyqrData(){
        let _this=this
        console.log(12344)
        _this.axios.post("/api/inviteRecord/getInvitePosterDataForH5",{userId:this.$route.query.userId}).then(res => {
          console.log("hhh")
          console.log(res)
          if (res.data.code == 100) {
            console.log("haha")
            _this.userHead=res.data.data.data.userHead;
            _this.userName=res.data.data.data.userName;
            _this.rmbValue=res.data.data.data.rmbValue;
          }  else {
            _this.tos(res.data.msg)
          }
        });
      },
      tos (test) {
        Toast({message: test, position: 'top', duration: 2000});
      },

      //cxr 跳转到红包验证页面
      tohongbaoyanzheng(){
        this.$router.push({path:'/hongbaoyanzheng'})
      }
    },
    mounted () {
      console.log('参数',this.$route.query.userId)
      this.getData();
      this.getyqrData()
    }
  }
</script>

<style lang="scss" scoped>
  @import "src/common/css/mixin";
  $background: #F9C54A;
  .box_cont{
    width:100%;
    min-height: 100vh;
    background: #ffffff;
    position:relative;
    .cont_bg{
      width:Rem(375);
      min-height: 100vh;
      margin:Rem(0) auto;
      background:url("/static/img/lhb_bg.png") no-repeat;
      background-size: 100% 100%;
      position: relative;
      z-index:5;
      .cont_title{
        width:Rem(375);
        height:Rem(38);
        line-height:Rem(38);
        text-align: center;
        color:$background;
        font-size:Rem(15);
        span{
          color:#ffffff;
        }
      }
      .cont_lists{
        width:Rem(335);
        margin:0 auto;
        margin-top:Rem(30);
        padding-bottom:Rem(20);
        .user_item{
          width:Rem(335);
          margin:Rem(20) 0;
          display: flex;
          .touxiang{
            width:Rem(45);
            height:Rem(45);
            border-radius: 50%;
            margin-top:Rem(3);
            margin-right:Rem(15);
          }
          .info{
            width:Rem(273);
            margin:Rem(6) 0;
            P{
              display: flex;
              justify-content: space-between;
              flex-wrap: nowrap;
              font-size:Rem(15);
            }
            p:first-child{
              span{
                color:#ffffff;
              }
            }
            p:last-child{
              span{
                color:$background;
              }
            }
          }
        }
      }
    }
    .zhezhao{
      width:Rem(375);
      min-height: 100vh;
      margin:Rem(0) auto;
      background:rgba(0,0,0,.7);
      position: fixed;
      top:0;
      left:0;
      z-index:15;
      .hongbao_box{
        width:Rem(290);
        height:Rem(350);
        margin:0 auto;
        background:url("/static/img/hb_img.png") no-repeat;
        background-size: 100% 100%;
        position: relative;
        top:Rem(162);
        z-index:20;
        text-align: center;
        .fhb_touxiang{
          width:Rem(70);
          height:Rem(70);
          margin-top:Rem(26);
        }
        .tishiyu{
          font-size:Rem(14);
          color:$background;
          margin-top:Rem(7);
          line-height:Rem(26);
          letter-spacing:Rem(1.5) ;
        }
        .kai{
          width:Rem(99);
          height:Rem(103);
          margin-top:Rem(36);
        }
        .lq_jine{
          color:#ffffff;
          font-size:Rem(24);
          margin-top:Rem(15);
        }
        .lq_btn{
          width:Rem(250);
          height:Rem(41);
          line-height:Rem(41);
          margin:0 auto;
          margin-top:Rem(46);
          text-align: center;
          background: #FFD571;
          color:#333333;
          font-size:Rem(15);
          border-radius: Rem(4);
        }
      }
    }
  }
</style>
